<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//10.1.1 Node类型（节点类型）
//			    console.log(Node.ELEMENT_NODE);//元素节点  1
//				console.log(Node.ATTRIBUTE_NODE);//属性节点 2
//				console.log(Node.TEXT_NODE);//文本节点 3
//				console.log(Node.CDATA_SECTION_NODE);//CDATA节点  4
//				console.log(Node.ENTITY_REFERENCE_NODE);//实体引用名称节点 5
//				console.log(Node.ENTITY_NODE);//实体名称节点 6
//				console.log(Node.PROCESSING_INSTRUCTION_NODE);//处理指令节点 7
//				console.log(Node.COMMENT_NODE);//注释节点 8
//				console.log(Node.DOCUMENT_NODE);//文档节点 9
//				console.log(Node.DOCUMENT_TYPE_NODE);//文档类型节点 10
//				console.log(Node.DOCUMENT_FRAGMENT_NODE);//文档片段节点 11
//				console.log(Node.NOTATION_NODE);// DTD声明节点 12 
                    //1.nodeName和nodeValue属性
                        //nodeType 节点类型
                        //nodeName 元素的标签名
                        //nodeValue 对于元素节点，nodeValue的值始终为null
                            <div id="app"></div>
	                        function f(ele){
								return document.getElementById(ele)
							}
							console.log(f('app').nodeType);//1
							console.log(f('app').nodeName);//DIV
                    //2.节点关系
                         //2.1 childNodes
                              //每个节点都有一个childNodes属性，其中保存着一个 NodeList 对象。
                              //NodeList 是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。
                              //基于 DOM 结构动态执行查询的结果，因此 DOM 结构的变化能够自动反映在 NodeList 对象中
                              //如何访问保存在 NodeList 中的节点——可以通过方括号，也可以使用 item()方法
                                    document.body.childNodes[2];
                                    document.body.childNodes.item(1);
                         //2.2 parentNode
                             //每个节点都有一个 parentNode 属性，该属性指向文档树中的父节点
                         //2.3 previousSibling，前一个同胞节点
                         //2.4 nextSibling，后一个同胞节点
                         //2.5 firstChild， 第一个子节点
                         //2.6 lastChild ，最后一个子节点
                         
                    //3.操作节点
                        //3.1 appendChild()，用于向 childNodes列表的末尾添加一个节点，传入参数为需要插入的节点
                               	function f(ele){
									return document.getElementById(ele)
								}
								document.body.appendChild(f('app'));
                        //3.2 insertBefore()，把节点放在 childNodes 列表中某个特定的位置上，而不是放在末尾。
                        //    insertBefore()方法。这个方法接受两个参数：要插入的节点和作为参照的节点。
	                            function f(ele){
										return document.getElementById(ele)
								}
								document.body.insertBefore(f('app'),f('box'));

                        //3.3 replaceChild()，替换节点，该方法接受的两个参数是：要插入的节点和要替换的节点
	                            function f(ele){
									return document.getElementById(ele)
								}
								document.body.replaceChild(f('app'),f('box'));
					    //3.4 removeChild()，删除节点，该方法接受一个参数，即要移除的节点。
					            function f(ele){
									return document.getElementById(ele)
								}
								document.body.removeChild(f('app'));
					    //以上四个方法操作的都是某个节点的子节点，也就是说，要使用这几个方法必须先取得父节点（使用 parentNode 属性）
					    //并不是所有类型的节点都有子节点，如果在不支持子节点的节点上调用了这些方法，将会导致错误发生
					    
				    //4.其他方法
				         //4.1 cloneNode();用于创建调用这个方法的节点的一个完全相同的副本
				         //    在参数为 true的情况下，执行深复制，也就是复制节点及其整个子节点树；
				         //    在参数为 false 的情况下，执行浅复制，即只复制节点本身。
				         
				         //4.2 normalize();唯一的作用就是处理文档树中的文本节点
				         
				         
             //10.1.2 Document类型
	             /*JavaScript 通过 Document 类型表示文档。在浏览器中，document 对象是 HTMLDocument（继承
	                           自 Document 类型）的一个实例，表示整个 HTML 页面。而且，document 对象是 window 对象的一个
	                           属性，因此可以将其作为全局对象来访问。*/
	                          
	              //1.文档的子节点
	                  //documentElement属性，该属性始终指向 HTML 页面中的<html>元素
	                  //通过 childNodes 列表访问文档元素
                            //var html = document.documentElement; //取得对<html>的引用
                            //var body = document.body;取得对<body>的引用
                  //2.文档信息
                      // var originalTitle = document.title;//取得文档标题，可以设置
                      // var url = document.URL;//取得完整的url,不可以设置
                      // var domain = document.domain;//取得域名,可以设置,但由于安全方面的限制，也并非可以给 domain 设置任何值
                      // var referrer = document.referrer;//取得来源页面的URL,不可以设置  
                      
                  //3.查找元素
                      //3.1 getElementById()方法，接收一个参数：要取得元素的ID
                      //    这里的 ID 必须与页面中元素的 id特性（attribute）严格匹配，包括大小写。
                            var dom = document.getElementById("box");
                      //3.2 getElementsByTagName()，接收一个参数：要取得元素的标签名
                      //    传给 getElementsByTagName()的标签名是不需要区分大小写的
                      //    返回的是包含零或多个元素的 NodeList
                            var doms = document.getElementsByTagName("div");
                      //3.3 getElementsByName(),接收一个参数：要取得元素的name特性，该方法返回带有给定 name 特性的所有元素
                        	var doms = document.getElementsByName("xx");
                      
                  //4.特殊集合
                      //document.anchors，包含文档中所有带 name 特性的<a>元素
                      //document.forms，包含文档中所有的<form>元素
                      //document.images，包含文档中所有的<img>元素
                      //document.links，包含文档中所有带 href 特性的<a>元素
                      
                  //5.DOM一致性检测
                      //由于 DOM 分为多个级别，也包含多个部分，因此检测浏览器实现了 DOM 的哪些部分就十分必要了。
                      //document.implementation 属性就是为此提供相应信息和功能的对象，与浏览器对 DOM 的实现直接对应。
                      //DOM1 级只为 document.implementation 规定了一个方法，即 hasFeature()。这个方法接受两个参数：要检测的 DOM 功能的名称及版本号。
                      //如果浏览器支持给定名称和版本的功能，则该方法返回 true。
                      
                  //6.文档写入
                      //document.write("写入");
                      //document.writeln("写入");
                      //document.open();
                      //document.close();
                      
            //10.1.3 Element类型
                  //nodeType的值为 1,nodeName 的值为元素的标签的名
                  //1.HTML元素
                      //var div = document.getElementById("box");
                      //console.log(div.id);//id名称
                      //console.log(div.classname);//class类名
                      
                  //2.取得特性
                      //每个元素都有一个或多个特性，这些特性的用途是给出相应元素或其内容的附加信息
                      //操作特性的DOM 方法主要有三个，分别是 getAttribute()、setAttribute()和 removeAttribute()。
                      
                      //getAttribue()，取得特性
                      //特性的名称是不区分大小写的，即"ID"和"id"代表的都是同一个特性。
                       		<div id="app" class="upload" data-special="ls"></div>
                            function f(xx){
								console.log(xx)
							}
							function getEle(ele){
								return document.getElementById(ele)
							}
							f(getEle('app').getAttribute('ID'));//app
							f(getEle('app').getAttribute('id'));//app
                      //另外也要注意，根据 HTML5 规范，自定义特性应该加上 data-前缀以便验证。
                            <div id="app" class="upload" data-special="ls"></div>
                      //任何元素的所有特性，也都可以通过 DOM 元素本身的属性来访问
                            <div id="app" class="upload" data-special="ls"></div>
                            function f(xx){
								console.log(xx)
							}
							function getEle(ele){
								return document.getElementById(ele)
							}
							f(getEle('app').id);//app
						    f(getEle('app').class);//undefined
							f(getEle('app').className);// upload
                      //开发人员经常不使用 getAttribute()，而是只使用对象的属性。只有在取得自定义特性值的情况下，才会使用 getAttribute()方法。
                            <div id="app" class="upload" data-special="ls"></div>
                            function f(xx){
								console.log(xx)
							}
							function getEle(ele){
								return document.getElementById(ele)
							}
							f(getEle('app')['data-special']);//undefined
							f(getEle('app').getAttribute('data-special'));//ls
					//有两类特殊的特性，它们虽然有对应的属性名，但属性的值与通过 getAttribute()返回的值并不相同。
					//第一类与众不同的特性是style特性
					//在通过 getAttribute()访问时，返回的 style 特性值中包含的是 CSS 文本，而通过属性来访问它则会返回一个对象。
					        <div id="app" class="upload" data-special="ls" style="line-height:18px;text-align:center;"></div>
					        function f(xx){
								console.log(xx)
							}
							function getEle(ele){
								return document.getElementById(ele)
							}
							f(getEle('app').getAttribute('style'));// line-height:18px;text-align:center;
							f(getEle('app').style);//一个对象
				    //第二类与众不同的特性是 onclick 这样的事件处理程序。
				    //当在元素上使用时，onclick 特性中包含的是 JavaScript 代码，如果通过 getAttribute()访问，则会返回相应代码的字符串。
				    //而在访问onclick 属性时，则会返回一个 JavaScript 函数（如果未在元素中指定相应特性，则返回 null）。
				     		<div id="app" class="upload" onclick="console.log(1)" data-special="ls" style="line-height:18px;text-align:center;"></div>
				            function f(xx){
								console.log(xx)
							}
							function getEle(ele){
								return document.getElementById(ele)
							}
							f(getEle('app').getAttribute('onclick'));// console.log(1)
							f(getEle('app').onclick);//ƒ onclick(event) {console.log(1)}
                 //3.设置特性 
                     //setAttribute()，设置特性
                     //要设置的特性名和值。如果特性已经存在，setAttribute()会以指定的值替换现有的值；如果特性不存在，setAttribute()则创建该属性并设置相应的值
                     //通过 setAttribute()方法既可以操作 HTML 特性也可以操作自定义特性。通过这个方法设置的特性名会被统一转换为小写形式，即"ID"最终会变成"id"
                     //所有特性都是属性，所以直接给属性赋值可以设置特性的值
                            getEle('app').id = 'newapp';
                     //为 DOM 元素添加一个自定义的属性，该属性不会自动成为元素的特性
                     		//div.mycolor = "red"; 
							//alert(div.getAttribute("mycolor")); //null（IE 除外）
					 //removeAttribute();删除特性
					 //removeAttribute()这个方法用于彻底删除元素的特性。调用这个方法不仅会清除特性的值，而且也会从元素中完全删除特性，
					 
				//4.attributes属性
				
				//5.创建元素
				  //document.createElement()方法可以创建新元素。这个方法只接受一个参数，即要创建元素的标签名
				        document.createElement("div");
            
            //10.1.4 Text类型
            //10.1.5 Comment类型
            //10.1.6 CDATASection类型
            //10.1.7 DocumentType类型
            //10.1.8 DocumentFragment类型
            //10.1.9 Attr类型
		</script>
	</body>
</html>
